<template>
  <div :class="data.is_lock == '-1' ? 'row ril' : 'row'">
    <div class="song-check">
      <input
        type="checkbox"
        v-if="index"
        :disabled="data.is_lock == '-1' ? true : false"
        :checked="data.is_lock == '-1' ? false : checked"
        @click="checkClick"
      />
    </div>
    <div class="song-index">
      <a>{{ index }}</a>
    </div>
    <div class="song-name">
      <a :href="'#music_id=' + data.music_id">{{ data.music_name }}</a>
    </div>
    <div class="song-singers">
      <a>{{ data.singer_name }}</a>
      <!-- <template v-for="(item,index) of data.ar" :key="index">
        <a>{{item.name}}</a>&nbsp;
      </template> -->
    </div>
    <div class="song-belongs">{{ data.album_name }}</div>
    <div class="song-actions"></div>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from "vue";
export default {
  name: "rowItem",
  props: {
    data: Object,
    index: Number,
    checked: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["checkClick"],
  setup(props, { emit }) {
    const state = reactive({
      checked: props.checked,
    });
    watch(
      () => props.checked,
      () => {
        state.checked = props.checked;
      }
    );

    const checkClick = () => {
      state.checked = !state.checked;
      emit("checkClick", {
        data: props.data,
        ischeck: state.checked,
      });
    };

    return {
      ...toRefs(state),
      checkClick,
    };
  },
};
</script>

<style lang='scss' scoped>
.row {
  &.ril {
    a {
      color: #999999;
      cursor: unset;
      &:hover {
        color: #999999;
      }
    }
  }
}
</style>
